<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*-----------------麻将外边框------------------*/
        div.mahJong1,
        div.mahJong2 {
            height: 200px;
            width: 140px;
            border: #666666 1px solid;
            margin-bottom: 20px;
            /* float: left; */
            margin:30px 30px 0 30px;
            background-color: #f4f4f4;
            border-radius: 10px;
            box-shadow: 15px -5px 0 #0D7114;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            align-content: flex-start;
        }

/*-----------------每个饼------------------*/
        div div[class*= mj] {
            margin-top: 10px;
            height: 40px;
            width: 40px;
            border-radius: 30px;
            background-color: #FFFFFF;
            border: #E1251B 5px double;
            box-sizing: border-box;
            position: relative;
        }
/*-----------------每个饼中间的圆------------------*/
        div div[class*= mj]::after {
            content: '';
            background-color: #FFFFFF;
            height: 15px;
            width: 15px;
            border: #E1251B 5px solid;
            position: absolute;
            top: 2.5px;
            left: 2.3px;
            border-radius: 15px;
        }
        /*-----------------七饼------------------*/
        div.mahJong1 div.mj1-1 {
            margin-left: 10px;
            border: #0D7114 5px solid;
        }
        div.mahJong1 div.mj1-2 {
            margin-top: 30px;
            border: #0D7114 5px solid;
        }
        div.mahJong1 div.mj1-3 {
            margin: 50px 10px 0 0;
            border: #0D7114 5px solid;
        }
        div.mahJong1 div.mj1-1::after,
        div.mahJong1 div.mj1-2::after,
        div.mahJong1 div.mj1-3::after {
            border: #0D7114 5px solid;
        }
        div.mahJong1 div.mj1-4,
        div.mahJong1 div.mj1-6 {
            margin: 10px 5px 0 15px;
        }
        div.mahJong1 div.mj1-5,
        div.mahJong1 div.mj1-7 {
            margin: 10px 15px 0 5px;
        }
        /*-------------------四饼------------------*/
        div.mahJong2 {
            justify-content: center;
            align-content: space-around;
        }
        div.mahJong2 div[class*=mj2] {
            margin: 10px;
        }
        div.mahJong2 div.mj2-1,
        div.mahJong2 div.mj2-4,
        div.mahJong2 div.mj2-1::after,
        div.mahJong2 div.mj2-4::after{
            border: #0D7114 5px solid;
        }
        div.mahJong2 div.mj2-2,
        div.mahJong2 div.mj2-3,
        div.mahJong2 div.mj2-2::after,
        div.mahJong2 div.mj2-3::after{
            border: #0D3068 5px solid;
        }


    </style>
</head>
<body>
<div class="mahJong1">
    <div class="mj1-1"></div>
    <div class="mj1-2"></div>
    <div class="mj1-3"></div>
    <div class="mj1-4"></div>
    <div class="mj1-5"></div>
    <div class="mj1-6"></div>
    <div class="mj1-7"></div>
</div>

<div class="mahJong2">
    <div class="mj2-1"></div>
    <div class="mj2-2"></div>
    <div class="mj2-3"></div>
    <div class="mj2-4"></div>
</div>
</body>
</html>